<template>
    <div class="the-func">
        <div class="the-func-input" v-if="isCutFill">
            基准面高：
            <el-input-number size="small" :controls="false" v-model="cutFillHeight" />&nbsp;米
        </div>
        <button
            class="the-func-button"
            :title="item.label"
            v-for="(item, index) in list"
            :key="index"
            :class="{ active: activeIndex === index }"
            @click="handlerItemClick(item, index)"
        >
            <img :src="item.icon" class="outter-icon" />
        </button>
    </div>
</template>

<script>
import { staticComputer } from "@/public/util/vue";
import { wutu3d } from "@/public/global/const";
import {
    initWork as initLookThroughWork,
    drawLine as drawLookThroughLine,
    drawCircle as drawLookThroughCircle,
    clearAll as clearLookThroughAll,
} from "@/view/client/component/TheCesiumMap/lib/drawLookThrough";
import { InputNumber } from "@/component/ElementUi";
import {
    initWork as initContourWork,
    clearAll as clearContourAll,
} from "@/view/client/component/TheCesiumMap/lib/drawContour";

export default {
    name: "TheFunc",
    components: {
        ElInputNumber: InputNumber,
    },
    props: {
        cesiumMap: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            cutFillHeight: 0,
            isCutFill: false,
            activeIndex: null,
            clearFunc: () => {},
            list: [
                {
                    label: "通视",
                    icon: require("@/asset/image/tongshi.svg"),
                    handler: this.$_drawLookThrough,
                },
                {
                    label: "圆形通视",
                    icon: require("@/asset/image/circle-tongshi.svg"),
                    handler: this.$_drawCircleLookThrough,
                },
                {
                    label: "等高线",
                    icon: require("@/asset/image/contour.svg"),
                    handler: this.$_drawContour,
                },
                // {
                //     label: "填挖方",
                //     icon: require("@/asset/image/cut-fill.svg"),
                //     handler: this.$_drawCutFill,
                // },
                {
                    label: "测距",
                    icon: require("@/asset/image/distance.svg"),
                    handler: () => {
                        this.measureTool.measuerLength({ terrain: true });
                        return this.$_clearMeasure;
                    },
                },
                // {
                //     label: "测量面积",
                //     icon: require("@/asset/image/area.svg"),
                //     handler: () => {
                //         this.measureTool.measureArea();
                //         return this.$_clearMeasure;
                //     },
                // },
                // {
                //     label: "测量角度",
                //     icon: require("@/asset/image/angle.svg"),
                //     handler: () => {
                //         this.measureTool.measureAngle({ isSuper: false });
                //         return this.$_clearMeasure;
                //     },
                // },
                {
                    label: "测量高度",
                    icon: require("@/asset/image/height.svg"),
                    handler: () => {
                        this.measureTool.measureHeight({ isSuper: false });
                        return this.$_clearMeasure;
                    },
                },
                {
                    label: "清除结果",
                    icon: require("@/asset/image/clear.svg"),
                    handler: () => {
                        this.activeIndex = null;
                        return () => {};
                    },
                },
            ],
        };
    },
    computed: {
        measureTool: staticComputer(),
        cutFillMeasureObj: staticComputer(),
    },
    watch: {
        cutFillHeight(val) {
            if (this.cutFillMeasureObj) {
                if (val === this.cutFillMeasureObj.height) {
                    return;
                }
                this.cutFillMeasureObj.height = val;
            }
        },
    },
    mounted() {
        // this.cesiumMap.viewer.scene.globe.depthTestAgainstTerrain = true;
        this.measureTool = new wutu3d.analysi.Measure({
            viewer: this.cesiumMap.viewer,
            removeScreenSpaceEvent: true,
            label: {
                font_size: 28,
                border_width: 4,
                background: false,
            },
        });
    },
    methods: {
        handlerItemClick({ handler }, index) {
            this.isCutFill = false;
            this.clearFunc();
            this.activeIndex = index;
            this.clearFunc = handler();
        },
        $_clearMeasure() {
            this.measureTool.clearMeasure();
            this.measureTool.endDraw();
            this.cesiumMap.viewer.scene.globe.depthTestAgainstTerrain = false;
        },
        $_drawContour() {
            initContourWork({
                viewer: this.cesiumMap.viewer,
            });
            return () => {
                clearContourAll();
            };
        },
        /**
         * 通视
         */
        $_drawLookThrough() {
            initLookThroughWork({
                viewer: this.cesiumMap.viewer,
            });
            drawLookThroughLine();
            return () => {
                clearLookThroughAll();
            };
        },
        /**
         * 圆形通视
         */
        $_drawCircleLookThrough() {
            initLookThroughWork({
                viewer: this.cesiumMap.viewer,
            });
            drawLookThroughCircle();
            return () => {
                clearLookThroughAll();
            };
        },
        $_drawCutFill() {
            this.isCutFill = true;
            this.cutFillHeight = 0;
            if (!this.cutFillMeasureObj) {
                this.cutFillMeasureObj = new wutu3d.analysi.MeasureVolume(this.cesiumMap.viewer, {
                    onStop: () => {
                        this.cutFillHeight = +this.cutFillMeasureObj.height.toFixed(0);
                    },
                });
            }
            this.cutFillMeasureObj.startDraw();
            return () => {
                this.cutFillMeasureObj.clear();
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.the-func {
    position: absolute;
    bottom: 80px;
    left: 50%;
    margin-left: -160px;
    z-index: 999;
    width: 320px;
    display: flex;
    justify-content: space-between;

    .the-func-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        outline: none;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.5);
        cursor: pointer;
        border-radius: 4px;

        &:hover,
        &.active {
            border: 1px solid #00a3e9;
            background-color: rgba(255, 255, 255, 0.3);
        }
    }

    .outter-icon {
        width: 20px;
        height: 20px;
    }
}

.the-func-input {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 15px;

  >>> {
        input {
            background: #000;
            color: #fff;
        }
    }
}
</style>
